<template>
  <div class="auctionDetail warp">
    <div class="auctionCon">
      <div class="a_left">
        <div class="image">
          <!-- <el-image :src="imgurls + img" alt=""></el-image> -->
          <!-- <img :src="detailObj.auctionImageUrl" alt="" /> -->
          <el-image
            style="width: 100%;height: 100%;"
            :src="detailObj.auctionImageUrl"
            fit="fill"
          ></el-image>
        </div>
      </div>
      <div class="a_right">
        <el-tooltip
          effect="dark"
          :content="detailObj.auctionName"
          placement="left"
        >
          <h2>
            {{ detailObj.auctionName }}
          </h2>
        </el-tooltip>
        <p class="other-focus">
          <span>拍卖企业：</span>
          <em>{{ detailObj.companyName }}</em>
        </p>
        <p class="other-focus">
          <span>联系电话：</span>
          <em>{{ detailObj.contactTel }}</em>
        </p>
        <div class="item_money_time">
          <!-- <p class="start green">即将开始</p> -->
          <p>
            <!-- <i class="el-icon-time"></i> -->
            计划开始时间 {{ detailObj.startTime }}
          </p>
        </div>
        <div class="item_money_time"> 
          <p>
            <span>标的数量：</span>
            {{ detailObj.lotsCount }}
          </p>
        </div>
        <!-- <div class="go">
          <v-btn type="plain" size="middle" @click="gohall">进入拍卖大厅</v-btn>
        </div> -->
        <!-- <div class="foot_num">
          <p>
            <span>围观次数：</span>
            <em>{{ detailObj.viewcount }}次</em>
          </p>
          <el-divider direction="vertical"></el-divider>
          <p>
            <span>标的数量：</span>
            <em>{{ detailObj.lotsCount }}</em>
          </p>
        </div> -->
      </div>
    </div>
    <v-tip :content="'标的列表'" :font-size="20" class="title" />
    <div class="card">
      <ul class="pai-item-list">
        <li v-for="(val, i) in lotsCardList" :key="i" class="pai-item">
          <div class="link_wrap" @click="routeDetail(val)">
            <el-card class="item_card" :body-style="{ padding: '0px' }">
              <div class="image">
                <el-image :src="val.imageUrl" alt="" class="lot_pic"></el-image>
              </div>

              <div class="item_content">
                <div class="item_title">
                  <div class="in_item_title">{{ val.corporeName }}</div>
                </div>
                <div class="item_money">
                  <p>
                    <span>起拍价</span>
                    <span class="red moneyBig"
                      >{{ val.startPrice
                      }}{{ val.startPriceUnit == 0 ? "元" : "万元" }}
                      <span class="m_rmb" v-if="val.corporeUnitName"
                        >/{{ val.corporeUnitName }}</span
                      >
                    </span>
                  </p>
                  <div class="item_money_time">
                    <p>预计{{ val.lotsStartTime }}开始</p>
                    <p v-if="val.corporeBiddingStatus == '0'" class="greenBtn">
                      即将开始
                    </p>
                    <p v-if="val.corporeBiddingStatus == '1'" class="redBtn">
                      正在进行
                    </p>
                    <!-- <p v-if="val.corporeBiddingStatus == '2'" class="grayBtn">
                      已结束
                    </p> -->
                    <!-- 0正在审核  1流拍 2成交-->
                    <p
                      v-if="
                        val.corporeBiddingStatus == '2' &&
                        val.corporeStatus == '2'
                      "
                      class="redBtn"
                    >
                      已成交
                    </p>
                    <p
                      v-if="
                        val.corporeBiddingStatus == '2' &&
                        val.corporeStatus == '1'
                      "
                      class="grayBtn"
                    >
                      已流拍
                    </p>
                    <p
                      v-if="
                        val.corporeBiddingStatus == '2' &&
                        val.corporeStatus == '0'
                      "
                      class="redBtn"
                    >
                      正在审核
                    </p>
                  </div>
                </div>
              </div>
            </el-card>
          </div>
        </li>
      </ul>
      <div class="footer_page">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[12, 20, 30, 40, 50]"
          :page-size="limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
  <script>
import { djAuctionDetail, lotsList } from "@/api/interface";
import vBtn from "@/components/title/b-btn.vue";
import vTip from "@/components/title/a-tip.vue";
import { getUserInfoID, timestampToTime } from "@/utils/auth";
export default {
  components: {
    vBtn,
    vTip,
  },
  data() {
    return {
      detailObj: {},
      lotsCardList: [], //标的列表
      img: "",
      page: 1,
      limit: 12,
      total: 0,
    };
  },
  created() {
    this.List();
  },
  methods: {
    List() {
      djAuctionDetail({ auctionCode: this.$route.query.auctionCode }).then(
        (res) => {
          this.img = res.data.image;
          res.data.start_time = timestampToTime(res.data.start_time).ymdhms;
          this.detailObj = res.data;
          if (this.detailObj.lotsList.length > 0) {
            this.detailObj.lotsList.forEach((item) => {
              item.time = this.timestampToTime(item.time);
            });
            this.lotsCardList = this.detailObj.lotsList;
            this.total = res.lotsCount;
          } else {
            this.$message({
              message: "暂无标的数据",
              type: "warning",
            });
            this.lotsCardList = [];
          }
        }
      );
      var obj;
      if (this.$route.query.type) {
        obj = {
          auction_id: this.$route.query.auctionCode,
          type: this.$route.query.type,
          page: this.page,
          limit: this.limit,
        };
      } else {
        obj = {
          auction_id: this.$route.query.auctionCode,
          page: this.page,
          limit: this.limit,
        };
      }
    },
    // // 点击进入拍卖大厅
    // gohall() {
    //   if (this.lotsCardList.length > 0) {
    //     let query = this.$route.query;
    //     var id = this.lotsCardList[0].id;
    //     let { href } = this.$router.resolve({
    //       path: "/lots/detail", // 这里写的是要跳转的路由地址
    //       query: { lotsId: id, auctionCode: query.auctionCode }, // 这里写的是页面参数
    //     });
    //     window.open(href, "_blank");
    //   } else {
    //   }
    // },
    routeDetail(val) {
      console.log(val, "val---------------------");
      let auctionCode = this.$route.query.auctionCode;
      let bidCode = val.corporeCode;
      let url = `https://www.dajiajixie.com/tradePlatform/disposal/auctionDetail?auctionCode=${auctionCode}&bidCode=${bidCode}`;
      window.open(url, "_blank");
    },
    //将时间戳转换成日期格式
    timestampToTime(timestamp) {
      var date = new Date(timestamp * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      // var Y = date.getFullYear() + '年';
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "月";
      var D =
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + "日";
      var h =
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
      var m =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      // return Y+M+D+h+m+s;
      return M + D + h + m;
    },
    // ---------分页
    handleSizeChange(val) {
      this.limit = val;
      this.List();
    },
    //----- 分页---------
    handleCurrentChange(val) {
      this.page = val;
      this.List();
    },
  },
};
</script>
  <style lang="less" scoped>
.auctionDetail {
  min-height: 100vh;
  .auctionCon {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    .a_left {
      overflow: hidden;
      .image {
        display: block;
        width: 810px;
        height: 275px;
        position: relative;
        overflow: hidden;
        // .el-image{
        //     // width: 100%;
        //     // height: 100%;
        //     min-height: 100%;
        //     min-width: 100%;
        //     position: absolute;
        //     top: 50%;
        //     transition: all .3s;
        //     transform: translateY(-50%);
        //     z-index: -1;
        // }
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
    }
    .a_right {
      width: 330px;
      height: 255px;
      background: #fff;
      padding: 10px 20px;
      h2 {
        font-size: 18px;
        height: 48px;
        line-height: 24px;
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      .other-focus {
        font-size: 12px;
        color: #999;
        margin: 8px 0;
      }
      .item_money_time {
        margin-bottom: 10px;
        .start {
          margin-bottom: 10px;
        }
      }
      .go {
        text-align: center;
      }
      .foot_num {
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin-top: 14px;
      }
    }
  }
  .title {
    margin-top: 20px;
  }
  .card {
    .m_rmb {
      font-size: 12px;
    }
    margin-top: 20px;
    .pai-item-list {
      display: grid;
      justify-content: space-between;
      grid-template-columns: repeat(auto-fill, 278px);
      grid-gap: 20px;
      .link_wrap {
        position: relative;
        display: inline-block;
        width: 280px;
        height: 355px;
        text-decoration: none;
        .item_card {
          .image {
            height: 190px;
            .lot_pic {
              display: block;
              width: 100%;
              height: 190px;
              /deep/.el-image__inner {
                object-fit: cover;
              }
            }
          }
          .item_content {
            padding-left: 12px;
            padding-right: 12px;
            padding-top: 8px;
            .item_title {
              height: 50px;
              font-size: 18px;
              .in_item_title {
                display: -webkit-box;
                overflow: hidden;
                text-overflow: ellipsis;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
              }
            }
            .item_money {
              font-size: 14px;
              color: rgb(153, 153, 153);
              .item_money_time {
                p {
                  display: inline-block;
                }

                p:last-of-type {
                  font-size: 12px;
                  font-weight: 400;
                  position: absolute;
                  right: 0px;
                  height: 20px;
                  line-height: 20px;
                  text-align: center;
                  border-radius: 12px 0px 0px 12px;
                  color: #fff;
                  padding: 0 6px 0 10px;
                }
              }
            }
            .item_money {
              p {
                margin-bottom: 10px;
              }
            }
            .item_bottom {
              height: 40px;
              font-size: 12px;
              line-height: 40px;
              border-top: 1px solid rgb(237, 237, 237);
              display: flex;
              justify-content: space-between;
              color: rgb(153, 153, 153);
            }
          }
        }
        .item_card:hover {
          border: 1px solid #cc0000;
        }
      }
    }
    .footer_page {
      margin: 26px 0;
      /deep/ .el-pagination {
        display: flex;
        justify-content: center;
      }
    }
  }
  .moneyBig {
    font-size: 20px;
    font-weight: 400;
    margin-left: 4px;
    margin-top: 4px;
  }
}
</style>